<template>
  <div class="app-container">
    <el-button class="create" type="primary" @click="create">创建</el-button>

    <el-table :data="list" style="width: 100%">
      <el-table-column prop="id" label="货架id" width="180" > </el-table-column>
      <el-table-column prop="prefix" label="货架开头"> </el-table-column>
      <el-table-column label="货架容量" prop="capacity">
      </el-table-column>

      <el-table-column prop="useNum" label="使用数"> </el-table-column>
        <el-table-column prop="factoryId" label="关联工厂">
            <template slot-scope="scope">
            {{factoryMap[scope.row.factoryId]? factoryMap[scope.row.factoryId].factoryName:"未匹配到工厂"}}
            </template>
        </el-table-column>

      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == '上架'" type="success">上架</el-tag>
          <el-tag v-if="scope.row.status == '下架'" type="danger">下架</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注"> </el-table-column>
      <el-table-column prop="updateBy" label="操作人"> </el-table-column>
      <el-table-column prop="updateTime" label="更新时间" width="180">
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="create(scope.row)"
            >编辑</el-button
          >
          <el-button
            type="text"
            size="small"
            v-if="scope.row.status == '下架'"
            @click="updateStatus(scope.row, 'ONLINE')"
            >上架</el-button
          >
          <el-button
            type="text"
            size="small"
            v-if="scope.row.status == '上架'"
            @click="updateStatus(scope.row,'OFFLINE')"
            >下架</el-button
          >

          <el-popconfirm
            style="margin-left: 10px"
            title="您确定要删除当前鞋架吗？"
            @confirm="deleteItem(scope.row)"
          >
            <el-button type="text" size="small" slot="reference"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="queryParams.total > 0"
      :total="queryParams.total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      @pagination="getListData"
    />

       <el-dialog title="新增货架" :visible.sync="open" width="800px" append-to-body >
        <el-form
          ref="form" :model="form" :rules="rules"
          label-width="80px"
             >
      <el-form-item label="货架开头" prop="prefix">
        <el-input
          v-model="form.prefix"
          :disabled="form.id"
          placeholder="请输入货架前缀"
        ></el-input>
      </el-form-item>

      <el-form-item label="货架容量" prop="capacity">
        <el-input-number
          v-model="form.capacity"
          :min="1"

          step-strictly
          placeholder="输入货架容量"
        ></el-input-number>
      </el-form-item>

      <el-form-item label="关联工厂" prop="factoryId">

        <el-select clearable v-model="form.factoryId" placeholder="请选择"  style="width:100%"  >
				           <el-option
                          v-for="item in factoryList"
                          :key="item.id"
                          :label="item.factoryName"
                          :value="item.id">
            </el-option>

				</el-select>

      </el-form-item>

      <el-form-item label="鞋架备注" prop="remark">
        <el-input
          type="textarea"
          v-model="form.remark"
          placeholder="请输入鞋架备注"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button :loading="subMitLoading" type="primary" @click="onSubmit">{{
          "确定"
        }} </el-button>
      </el-form-item>

    </el-form>

      </el-dialog>



  </div>





</template>

<script>
import {
   list,
   saveOrUpdate,
   updateStatus,
   _delete,
   getDetailById
} from "@/api/factory/factoryshelves/index";

import { listFactory } from '@/api/factory'



import { codeToText } from "element-china-area-data";
import { Loading } from "element-ui";
import stata from "highlight.js/lib/languages/stata";
export default {
  name: "Index",

  data() {

    return {

      subMitLoading:false,

      form:{

      },
      factoryList:[],
      factoryMap:{},
      open:false,
       rules: {
        // prefix: [
        //   { required: true, message: "货架前缀不能为空", trigger: "blur" }
        // ],
        // capacity: [
        //   { required: true, message: "容量不能为空", trigger: "change" }
        // ],
        // factoryId: [
        //   { required: true, message: "工厂id不能为空", trigger: "change" }
        // ],
        // remark: [
        //   { required: true, message: "备注不能为空", trigger: "change" }
        // ]
      },
      queryParams: {
        page: 0,
        pageSize: 10,
        total: 0
        // status:"ONLINE"
      },
      list: [],
      codeToText,
    };
  },
  created() {
    this.form={}
    this.getFactoryList()

  },
  methods: {

    onSubmit(){
      this.subMitLoading=true
      saveOrUpdate(this.form).then(res=>{
           this.$modal.msgSuccess("操作成功");
           this.open=false
           this.subMitLoading=false
           this.form={}
            this.getListData();
      })
      this.reset()

    },

    reset(){
      this.form={
      }
    },

    getFactoryList(){

   listFactory({pageNo:1,pageSize:100}).then(res=>{
        this.factoryList=res.data.records
        this.factoryList.forEach(element => {
               this.factoryMap[element.id]=element
        });

        this.getListData();

      })

    },

    getListData() {
      list(this.queryParams).then(({ data }) => {
        this.list = data.records;
         this.queryParams.total = data.total;
         this.queryParams.page = data.current;
         this.queryParams.limit = data.size;
      });
    },
    updateStatus(item,status) {
      // addOrEditShoeRack({
      //   ...item,
      //   status,
      // }).then((res) => {
      //   this.loading = false;
      //   this.$message.success("操作成功");
      //   this.getListData(this.queryParams);
      // });
      item.status=status
      updateStatus(item).then(res=>{
      this.$message.success("操作成功");
       this.getListData();

      })
    },
    deleteItem(item) {
      _delete({id:item.id,factoryId:item.factoryId}).then((res) => {
        this.$message.success("删除成功");
        this.getListData();
      });
    },
    create(item) {
      this.reset()
      // this.$router.push({ path: "/shoeRack/edit" });
      this.open=true
      if(item.id){
          getDetailById({id:item.id}).then(res=>{
               this.form=res.data
        })
      }



    },
    edit(id) {
      // console.log(id, "zxcasd");
      // this.$router.push({ path: `/shoeRack/edit?id=${id}` });
    },
  },
};
</script>

<style lang="scss" scoped>
.create {
  margin-bottom: 20px;
}
</style>
